import React, { PureComponent } from 'react'
import { Popover } from 'antd'
import styles from './index.less'

/**
 * 用于渲染treeNode的title
 */
export default class TreeTitle extends PureComponent {
  state = {
    visible: false,
  };

  hide = () => {
    this.setState({
      visible: false,
    })
  };

  handleVisibleChange = (visible) => {
    this.setState({ visible })
  };

  render() {
    const {
      title, icon, operations, freeze, ...others
    } = this.props
    return (
      <div
        className={styles.pro_tree_title}
        {...others}
        onContextMenu={() => {
          this.setState({ visible: true })
        }}
      >
        {/* icon */}
        {/* <div className={styles.pro_tree_title_icon} key="0">
          {this.props.icon || (
            <i className="iconfont icon-mianxingwenjianjiamoren" />
          )}
        </div> */}
        {/* title */}
        <div className={styles.pro_tree_title_text} key="1" title={this.props.title}>
          {this.props.title}
        </div>
        {/*  冻结  */}
        {this.props.freeze ? (
          <i
            title="调度状态：冻结"
            key="2"
            className={`iconfont icon-dongjie ${styles.pro_tree_title_freeze}`}
          />
        ) : null}
        {/*  警告  */}
        {this.props.isValid ? (
          <i
            title="任务运行出错"
            key="3"
            className={`iconfont icon-jinggao ${styles.pro_tree_title_freeze1}`}
          />
        ) : null}
        {/*  操作栏  */}
        <span
          onClick={(e) => {
            if (this.state.visible) {
              this.hide() // 防止点击多次
            }
            e.stopPropagation()
          }}
        >
          {this.props.operations
            && Array.isArray(this.props.operations)
            && this.props.operations.map((o, k) => {
              if (o) {
                return true
              }
              return false
            })
            && this.props.operations.length > 0
            ? (
              <Popover
                placement="rightTop"
                mouseEnterDelay={0.05}
                mouseLeaveDelay={0.1}
                content={this.props.operations}
                trigger="click"
                overlayClassName={styles.pro_tree_title_popover}
                visible={this.state.visible}
                onVisibleChange={this.handleVisibleChange}
              >
                {/* 防止点击更多触发展开事件 */}
                <i
                  className="iconfont icon-gengduo pro_tree_title_more"
                />
              </Popover>
            ) : null}
        </span>
      </div>
    )
  }
}
